import React, {Component} from 'react';
import GridTable from '../../components/display/gridTable';
import { Button, Input, Select, Row, Col, Tooltip, Carousel } from 'antd';
import { errorCorrection } from '../../fetch/fetchApi';
import ScModal from '../../components/feedback/scModal';
const Option = Select.Option;

class Recovery extends Component {
  constructor () {
    super();
    this.state = {
      gridData: null,
      loadingmes: '查询',
      loading: !1,
      btnloading: !1,
      pagination: {
        total: 0
      }
    };
    this.init();
  }

  componentDidMount () {
    this.queryChargeInfo();
  }

  init () {
    this.query = {
      page: '1',
      pagecount: '10'
    };
    this.params = {};
    this.errorType = {
      '1': '位置描述不准确',
      '2': '停车信息不属实',
      '3': '充电桩故障',
      '4': '二维码无法识别',
      '5': '车位被占用',
      '9': '其他'
    };
    // 设置表头
    this.tableColumns = [
      {
        title: '用户账号',
        dataIndex: 'account',
        key: 'account',
      }, {
        title: '电站名称',
        dataIndex: 'stubGroupName',
        key: 'stubGroupName',
        className: 'column-nowrap',
        render: (text, record) => (
          <Tooltip placement="topLeft" title={text}>
            {text}
          </Tooltip>)
      }, {
        title: '电桩编号',
        dataIndex: 'stubGroupId',
        key: 'stubGroupId',
        className: 'column-nowrap',
        render: (text, record) => (
          <Tooltip placement="topLeft" title={text}>
            {text}
          </Tooltip>)
      }, {
        title: '纠错类型',
        dataIndex: 'errorType',
        key: 'errorType',
        render: (text, record) => (
          <div>{this.errorType[text]}</div>
        )
      }, {
        title: '纠错内容',
        dataIndex: 'errorInfo',
        key: 'errorInfo',
        className: 'column-nowrap',
        render: (text, record) => (
          <Tooltip placement="topLeft" title={text}>
            {text}
          </Tooltip>)
      }, {
        title: '图片',
        dataIndex: 'fullURL',
        key: 'fullURL',
        render: (text, record) => (<img onClick={() => this.openThumbModal(record.fullURL, '图片预览', 0)} style={{width:'60px'}} src={record.fullURL && record.fullURL.toString().split(',')[0]}/>)
      }, {
        title: '上报时间',
        dataIndex: 'createTime',
        key: 'createTime'
    }
    ];
  }

  // 打开预览
  openThumbModal (imgs, title, type) {
    this.openType = type;
    const imgArr = imgs.toString().split(',');
    const thumbDom = [];
    for (let i of imgArr) {
      i.length && thumbDom.push(<div key={i}><h3><img src={i} /></h3></div>);
    }
    this.setState({
      width: 620,
      modalTitle: title,
      thumbDom: thumbDom,
      modalName: 'thumbPic'
    }, () => {
      this.setState({
        modalVisible: !0
      });
    });
  }

  // fetch DataSource
  async errorCorrection () {
    this.setState({
      loading: !0,
      btnloading: !0
    });
    try {
      const resData = await errorCorrection(this.query);
      if (resData.data.code === '200') {
        const pagination = {
          total: resData.data.pageLimit.totalCount,
          onShowSizeChange: (current) => {
            this.turnPage(current)
          },
          onChange:(current) => {
            this.turnPage(current)
          }
        }
        this.setState({
          pagination
        });
        return resData.data.data;
      }
    } catch (e) {
      console.log(e);
    }
  }

  // 跳转页码
  turnPage (current) {
    this.query['page'] = current.toString();
    this.errorCorrectionCb();
  }

  // 提交查询
  queryChargeInfo () {
    this.query.page = '1';
    this.state.pagination.current = 1;
    this.setState({
      pagination: this.state.pagination
    });
    this.errorCorrectionCb();
  }

  errorCorrectionCb () {
    this.errorCorrection().then((data) => {
      this.setState({
        loading: !1,
        btnloading: !1,
        gridData: data
      });
    });
  }

  // 注入账号信息参数
  userInputHandler (e) {
    this.query['account'] = e.target.value;
  }

  // 注入电站名称
  powerStationInputHandler (e) {
    this.query['powerStationName'] = e.target.value;
  }

  // 注入状态参数
  errorInputHandler (e) {
    this.query['errorType'] = e.toString();
  }

  // 注入类型参数
  operationInputHandler (e) {
    this.query['operationType'] = e.toString();
  }

  // 取消弹窗
  cancel () {
    this.setState({
      modalVisible: !1,
      confirmLoading: !1,
      replyContent: ''
    });
  }

  render () {
    const Content = <div className="sc-page-content">
      <div className="page-toolbar">
        <Row gutter={8}>
          <Col lg={8} xl={4}>
            <Input placeholder="用户账号精确查询" onChange={this.userInputHandler.bind(this)}/>
          </Col>
          <Col lg={8} xl={4}>
            <Input placeholder="电站名称" onChange={this.powerStationInputHandler.bind(this)}/>
          </Col>
          <Col lg={8} xl={4}>
            <Select placeholder="纠错类型" onChange={this.errorInputHandler.bind(this)}>
              <Option value="1">位置不准确</Option>
              <Option value="2">停车信息不准确</Option>
              <Option value="3">充电桩故障</Option>
              <Option value="4">二维码无法识别</Option>
              <Option value="5">车位被占</Option>
              <Option value="9">其他</Option>
            </Select>
          </Col>
          <Col lg={8} xl={4}>
            <Select placeholder="类型" onChange={this.operationInputHandler.bind(this)}>
              <Option value="0">公桩</Option>
              <Option value="1">私桩</Option>
              <Option value="2">移动储能</Option>
            </Select>
          </Col>
          <div  className="button-inlineBlock">
            <Button type="primary" onClick={this.queryChargeInfo.bind(this)}>{this.state.loadingmes}</Button>
          </div>
        </Row>
      </div>
      <div className="page-panel">
        <GridTable postyle="table-center" data={this.state.gridData} columns={this.tableColumns} loading={this.state.loading} pagination={this.state.pagination}/>
        {this.state.modalName === 'thumbPic' && <ScModal
          width={this.state.width}
          modalVisible={this.state.modalVisible}
          modalTitle={this.state.modalTitle}
          modalContent={(<div className="sc-modal-scroll">
            <div className={'modal-list'}>
              <Carousel autoplay>
                {this.state.thumbDom}
              </Carousel>
            </div>
          </div>)}
          cancel={this.cancel.bind(this)}
          footer={null}
        />}
      </div>
    </div>;

    return Content;
  }
}

export default Recovery;